import React, { Component } from "react";
import { Image, Carousel } from "antd";
import "@/styles/index.css";

export default class Banner extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <div id="banner">
          <div className="top">
            <Carousel autoplay>
              {this.props.banner.map((item, index) => {
                return (
                  <div key={index}>
                    <div className="images">
                      <a href="#">
                        <Image id="bannerImg01" height={549} src={item.url} />
                      </a>
                    </div>
                    <div className="bannerContent">
                      <h1>{item.title}</h1>
                    </div>
                  </div>
                );
              })}
            </Carousel>
          </div>
          <div className="container feature clearfix">
            {this.props.product.map((item, index) => {
              return(
                <a href="#" className="bg01" key={index}>
                  <h1>{item.title}</h1>
                  <p>
                    {item.content}
                  </p>
                </a>
              )
            })}
          </div>
        </div>
      </>
    );
  }
}
